<template>
  <div>
    <!-- 生成微信支付二维码 -->
    <div class="erwei">
      <img :src="payUrl" alt="" />
    </div>
    <span style="color: black">使用微信进行支付</span>
    <el-descriptions title="订单详情">
      <el-descriptions-item label="订单号">{{
        orderDetail.order_id
      }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{
        orderDetail.create_time
      }}</el-descriptions-item>
      <el-descriptions-item label="产品名称">{{
        orderDetail.orderDetail[0].productName
      }}</el-descriptions-item>
      <el-descriptions-item label="商品描述">{{
        orderDetail.orderDetail[0].description
      }}</el-descriptions-item>
      <el-descriptions-item label="购买数量">{{
        orderDetail.orderDetail[0].quantity
      }}</el-descriptions-item>
      <el-descriptions-item label="购买用户">{{
        userInfo.nickname
      }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{
        userInfo.phone ? userInfo.phone : "没有手机号码"
      }}</el-descriptions-item>
      <el-descriptions-item label="总价格">
        {{ orderDetail.total_fee }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import * as api from "../../../../api/index";
import qrCode from "qrcode";
// 首先获取订单id
import { mapState } from "vuex";
export default {
  data() {
    return {
      //请求的订单详情
      orderDetail: {
        //数据初始化
        orderDetail: [
          {
            productName: "",
            description: "",
            quantity: "",
          },
        ],
      },
      payUrlRes: {}, //请求获取的支付结果
      payUrl: "", //支付地址
    };
  },
  computed: {
    ...mapState(["order_id", "userInfo"]),
  },
  created() {
    if (!this.order_id) {
      // 没有订单id 可能是刷新了页面
      // 本次交易取消 返回预支付页面
      this.$alert("本次交易取消", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$router.push({ name: "pre_order" });
        },
      });
      return;
    }
    // 并发请求
    Promise.all([
      api.getOrderDetailApi(this.order_id),
      api.getPayUrlApi(this.order_id),
    ])
      .then((res) => {
        let orderDetail = res[0].data.data; //订单的详情
        let payUrlRes = res[1].data; //订单的支付地址

        this.orderDetail = orderDetail;
        this.payUrlRes = payUrlRes;

        qrCode.toDataURL(payUrlRes.code_url, (err, dataUrl) => {
          // console.log(dataUrl);
          this.payUrl = dataUrl; //生成一个二维码的图片地址
        });
      })
      .catch((err) => {});

    //轮询  注意：定时器一定要写时间
    this.queryPayStatusInterval = setInterval(() => {
      api.queryPayResultApi(this.order_id).then((res) => {
          console.log(res);
        if (res.data.state) {
          // 支付成功
          // 清除定时器
          clearInterval(this.queryPayStatusInterval);
          // 跳转到支付成功的页面
          this.$router.push({ name: "paySuccess" });
        }
      });
    }, 500);
  },
  // 组件销毁前清除定时器
  beforeDestroy() {
    clearInterval(this.queryPayStatusInterval);
  },
  // 1.根据订单id 请求订单详情
  // 2.根据订单id 获取微信支付地址 获取地址之后 生成二维码
  // 3.如果用户刷新页面，本次交易取消，我们需要让用户重新提交交易
};
</script>